<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component-demo</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="./script/vue.js"></script>
</head>
<body>

<div id="blog-posts-events-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize +=$event"
        ></blog-post>
    </div>
</div>

<script>
<!--    单根元素 模板包含多个属性-->
    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text',0.1)">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ],
            postFontSize: 1
        }
    })
</script>

</body>
</html>